<template>
	<view>
		<!--pages/sex/sex.uniml-->
		
		<!-- <van-notify id="van-notify" /> -->
		<nav-back></nav-back>
		
		<view class="title">
		  <text>请选择您的性别  </text> 
		</view>
		<view class="tip">最真实的自己，更快遇到最应该的那个人</view>
		
		<view class="sex-list">
		  <view class="man sex" @click="handleSex(1)">
		    <image src="/static/img/man.png" mode=""/>
		    <image v-if="sex==1" class="man-bg" src="/static/img/man-bg.png" mode=""/>
		  </view>
		  <view class="woman sex" @click="handleSex(0)">
		    <image src="/static/img/woman.png" mode=""/>
		    <image v-if="sex==0" class="man-bg" src="/static/img/man-bg.png" mode=""/>
		  </view>
		</view>
		<button class="next" type="primary" @click="handleNext">下一步</button>
		
		<view class="promise-bg" v-if="hasPromise==false">
		  <view class="promise">
		    <view class="tip">
		      <image src="/static/img/tip.png" mode=""/>
		      <text>温馨提示</text> 
		    </view>
		    <view class="info">
		      <text>
		        作为线上交友平台，我们坚决拒绝任何人提供虚假信息，但由于技术原因，无法保证会员信息100%真实性，为了您及他人的交友安全。希望您做如下承诺:
		        1.本人当前婚姻状况为未婚/离异 
		        2.在本平台登记均为真实信息，如有虚假愿意承担由此导致的一切后果
		      </text>
		    </view>
		    <view class="treaty">
		      <!-- <view class="circle"></view> -->
		      <view class="agree" @click="handleAgree">
		        <image v-if="isAgree==false" src="/static/img/agree1.png" mode=""/>
		        <image v-if="isAgree==true" src="/static/img/agree2.png" mode=""/>
		      </view>
		      已同意 <text>《相亲会员协议》</text>
		    </view>
		    <button class="accept" type="primary" @click="handleAccept">我承诺</button>
		  </view>
		
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				sex:1,
				isAgree:false,
				hasPromise:false
			}
		},
		methods: {
			 handleSex(sex){
				this.sex = sex
			  },
			  handleAgree(){
			    this.isAgree = !this.isAgree
			  },
			  handleAccept(){
			    if(this.isAgree==true){
			      this.hasPromise = true
			    }else{
			      uni.showToast({
			        title: '请同意相亲会员协议',
			        icon: 'none',
			        duration: 1000
			      })
			    }
			  },
			  handleNext(){
			    getApp().globalData.userInfo.sex = this.sex
			    console.log(getApp().globalData.userInfo,'this.career');
			    uni.redirectTo({
			      url: '/pages/userInfo/avatarInfo/avatarInfo'
			    })
			  },
		}
	}
</script>

<style lang="scss">
@import "@/style/register.scss";

.sex-list{
  display: flex;
  margin-top: 350rpx;
  justify-content: space-around;
  .sex{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    background-color: #DFEEFF;
    background-size: 100%;
    .man-bg{
      position: absolute;
      top: 0 ;
      left: 0;
      width: 200rpx;
      height: 200rpx;
    }
  }
  .woman{
    background-color: #FFF0F2;
  }
  image{
    width: 80rpx;
    height: 80rpx;
  }
}


.promise-bg{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(56, 56, 56, 0.5);
  .promise{
    width: 80%;
    height: 800rpx;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 40rpx;
    margin: auto;
    padding:40rpx 60rpx;
    color: rgba(51, 51, 51, 1);
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
	text{
		font-size: 24rpx;
	}
    .tip{
      display: flex;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
      // margin-top: 60rpx;
      align-items: center;
      justify-content: center;
      image{
        width: 32rpx;
        height: 32rpx;
        margin: 0 10rpx;
      }
	  text{
		  font-size: 32rpx;
	  }
    }
    .info{
      margin-top: 30rpx;
      line-height: 48rpx;
    }
    .treaty{
      width: 100%;
      margin-top: 100rpx;
      justify-content: start;
    }
  }
}
</style>
